<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#btnMap, #btnArray, #btnMA{
	width:100px;
	height: 50px;
	border:2px solid orange;
}
#result{
	width: 500px;
	height: 500px;
	border:2px dotted gray;


}
</style>
<script>
var rs;
var xhr;

function init(){
	var map = document.querySelector("#btnMap");
	var array = document.querySelector("#btnArray");
	var ma = document.querySelector("#btnMA");
	rs = document.querySelector("#result");

	
	map.onclick = function(){
		// 데이터 구조를 map 형태로 만들어 제어
		var data = {apple:'사과', banana:'바나나', melon:'멜론', watermelon:'수박'};
		rs.innerHTML = "";
		rs.innerHTML += "<li>APPLE : " + data.apple;
		rs.innerHTML += "<li>BANANA : " + data.banana;
		rs.innerHTML += "<li>MELON : " + data['melon'];
		rs.innerHTML += "<li>WATERMELON : " + data['watermelon'];
	}
	
	array.onclick = function(){
		// 데이터 구조를 Array 형태로 만들어 제어
		var data = ['백두산', '금강산', '지리산', '뒷산'];
		
		rs.innerHTML = "";
		for(i=0; i<data.length; i++){
			rs.innerHTML += "<li>" + data[i];
		}
	}
	
	ma.onclick = function(){
		// 데이터 구조를 map 과 array 형태로 같이 가져온다.
		var data = {apple:'사과', banana:'바나나', melon:'멜론', watermelon:'수박',
				mnt : ['백두산', '금강산', '지리산', '뒷산']};
		
		rs.innerHTML = "";
		rs.innerHTML += "<li>APPLE : " + data.apple;
		rs.innerHTML += "<li>BANANA : " + data.banana;
		rs.innerHTML += "<li>MELON : " + data['melon'];
		rs.innerHTML += "<li>WATERMELON : " + data['watermelon'] +"<p/>";
		
		for(i=0; i<data.mnt.length; i++){
			rs.innerHTML += "<li>" + data.mnt[i];
		}
	}
	
}
</script>

</head>
<body>
<input type="button" value="MAP" id="btnMap">
<input type="button" value="Array" id="btnArray">
<input type="button" value="Map + Array" id="btnMA">
<p/>
<div id="result"><Br/></div>

<script>init();</script>
</body>
</html>